<template>
  <view class="page">
    <!-- 自定义头部 start -->
    <fu-custom bgColor="bg-white" :isBack="false"><block slot="content">{{i18n['登录']}}</block></fu-custom>
    <!-- 自定义头部 end -->
    <view class="solid-top">
      <!-- 关闭 -->
      <view class="text-right text-df padding" @tap="cancle">
       {{ i18n['跳过，看好物']}}
        <text class="cuIcon-right"></text>
      </view>
      <!-- logo -->
      <view class="header"><image :src="logo"></image></view>
      <view class="content">
        <view>{{i18n['申请获取以下权限']}}</view>
        <text>{{i18n['获得你的公开信息(昵称，头像、地区等)']}}</text>
      </view>
      <button v-if="canIUseGetUserProfile" class="bottom bg-white" @click="wxGetUserProfile">
        <image class="margin-right-xs" :src="imgWechatUrl+'/user/weixin.png'" mode="aspectFit"></image>
       {{ i18n['微信手机号一键登录']}}
      </button>
      <button v-else class="bottom bg-white" type="" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
        <image class="margin-right-xs" :src="imgWechatUrl+'/user/weixin.png'" mode="aspectFit"></image>
       {{ i18n['微信手机号一键登录']}}
      </button>
      <view class="text-center text-999 text-sm">
       {{ i18n['注册登录即同意']}}
        <text class="alink margin-lr-xs" @tap="navto(1)">{{i18n['《用户注册协议》']}}</text>
       {{ i18n['和']}}
        <text class="alink margin-lr-xs" @tap="navto(2)">{{i18n['《隐私政策》']}}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
			imgWechatUrl: this.imgWechatUrl,
      logo: global.SYSTEM_CONFIG.logo, // logo图路径
      canIUseGetUserProfile: false // 是否支持新版的微信登录API
    };
  },
  /**
   * @description 新增内容
   * @description 判断当前微信版本是否支持新版微信登录接口
   * @author 默默
   * */
  onLoad() {
    if (wx.getUserProfile) {
      this.canIUseGetUserProfile = true;
    }
  },
  methods: {
    // 取消登录
    cancle() {
      uni.navigateBack();
    },
    // 新版微信登录接口
    wxGetUserProfile() {
      uni.showLoading({
        title: this.i18n['登录中...']
      });
      let code = '';
      uni.login({
        success: res => {
          code = res.code;
        }
      })
      uni.getUserProfile({
        desc: '用于完善会员资料',
        success: infoRes => {
          console.log('infoRes', infoRes);
          // 允许授权用户登录
          // 请求登录接口
          this.$api
            .post(global.apiUrls.postMiniparamLogin, {
              encryptedData: encodeURIComponent(infoRes.encryptedData),
              iv: encodeURIComponent(infoRes.iv),
              code: code
            })
            .then(result => {
              result = result.data;
              console.log('后台返回登录信息', result);
              if (result.code == 1) {
                uni.hideLoading();
                // 如果后台返回来的是 result 字段,表示此账号还没有绑定过手机号 跳转到绑定手机号页面
                // 如果后台返回的是 userinfo 字段,表示已经登录成功,把用户信息存到 store 中,并返回跳转来的页面
                if (result.data.result) {
                  uni.setStorageSync('Wxinfo_tmp', result.data.result);
                  setTimeout(function() {
                    uni.redirectTo({
                      url: '/pages/user/login/auth-phone/index'
                    });
                  }, 500);
                } else if (result.data.userinfo) {
                  this.$store.commit('updateUserInfo', result.data.userinfo);
                  uni.navigateBack();
                }
              } else if (result.code == -999) {
                // 服务器解析参数错误
                uni.hideLoading();
                this.$message.info(result.msg);
              } else {
                uni.hideLoading();
                this.$message.info(this.i18n['授权失败，请使用其他方式登录']);
              }
            })
            .catch(err => {
              console.log('ERROR', err);
              uni.hideLoading();
              this.$message.info(err.msg);
            });
        },
        fail: err => {
          console.log('ERROR', err);
          uni.hideLoading();
        }
      });
    },
    // 旧版微信登录接口
    wxGetUserInfo(e) {
      uni.showLoading({
        title: this.i18n['登录中...']
      });
      uni.login({
        success: res => {
          const code = res.code;
          uni.getUserInfo({
            provider: 'weixin',
            success: infoRes => {
              console.log('infoRes', infoRes);
              // 允许授权用户登录
              // 请求登录接口
              this.$api
                .post(global.apiUrls.postMiniparamLogin, {
                  encryptedData: encodeURIComponent(infoRes.encryptedData),
                  iv: encodeURIComponent(infoRes.iv),
                  code: code
                })
                .then(result => {
                  result = result.data;
                  console.log('后台返回登录信息', result);
                  if (result.code == 1) {
                    uni.hideLoading();
                    // 如果后台返回来的是 result 字段,表示此账号还没有绑定过手机号 跳转到绑定手机号页面
                    // 如果后台返回的是 userinfo 字段,表示已经登录成功,把用户信息存到 store 中,并返回跳转来的页面
                    if (result.data.result) {
                      uni.setStorageSync('Wxinfo_tmp', result.data.result);
                      setTimeout(function() {
                        uni.redirectTo({
                          url: '/pages/user/login/auth-phone/index'
                        });
                      }, 500);
                    } else if (result.data.userinfo) {
                      this.$store.commit('updateUserInfo', result.data.userinfo);
                      uni.navigateBack();
                    }
                  } else if (result.code == -999) {
                    // 服务器解析参数错误
                    uni.hideLoading();
                    this.$message.info(result.msg);
                  } else {
                    uni.hideLoading();
                    this.$message.info(this.i18n['授权失败，请使用其他方式登录']);
                  }
                })
                .catch(err => {
                  console.log('ERROR', err);
                  uni.hideLoading();
                  this.$message.info(err.msg);
                });
            },
            fail: err => {
              console.log('ERROR', err);
              this.$message.info(this.i18n['获取用户授权失败']);
              uni.hideLoading();
            }
          });
        },
        fail: err => {
          console.log('ERROR', err);
          uni.hideLoading();
        }
      });
    },
    // 去查看用户隐私协议
    navto(id) {
      this.$urouter.navigateTo({
        url: '/pages/user/login/user-agreement/index',
        params: {
          id: id
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// 页面样式 start
.page {
  min-height: 100vh;
  background: #fff;
}
// 页面样式 end

// logo样式 start
.header {
  height: 400rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  image {
    width: 200rpx;
    height: 200rpx;
  }
}
// logo样式 end

// 内容区 start
.content {
  margin-left: 50rpx;
  margin-bottom: 90rpx;
}
.content text {
  display: block;
  color: #9d9d9d;
  margin-top: 40rpx;
}
// 内容区 end

// 底部说明 start
.bottom {
  border-radius: 40rpx;
  margin: 70rpx 50rpx;
  font-size: 30rpx;
  border: 2rpx solid #39b54a;
  color: #39b54a;

  image {
    width: 49rpx;
    height: 40rpx;
    vertical-align: middle;
  }
}
.bottom::after {
  display: none;
}
.alink {
  color: $fu-type-primary-dark;
  text-decoration: underline;
}
// 底部说明 end
</style>
